<template>
  	<nav class="navbar navbar-dark bg-primary justify-content-between mb-4 px-4">
  		<a href="#" class="navbar-brand">者也专栏</a>
  		<ul class="list-inline mb-0" v-if="!user.isLogin">
  			<li class="list-inline-item">
  				<a href="#" class="btn btn-outline-light my-2">登录</a>
  			</li>
  			<li class="list-inline-item">
  				<a href="#" class="btn btn-outline-light my-2">注册</a>
  			</li>
  		</ul>
  		<ul class="list-inline mb-0" v-else>
  			<li class="list-inline-item">
  				<drop-down :title="`你好，${user.name}`"></drop-down>
  			</li>
  		</ul>
  	</nav>
</template>

<script lang="ts">
	import { defineComponent, PropType } from 'vue'
	import DropDown from './DropDown.vue'

	export interface UserProps {
		isLogin: boolean;
		id?: number;
		name?: string;
	}

	export default defineComponent({
	  	name: 'GlobalHeader',
	  	components: { DropDown },
	  	props: {
	  		user: {
	  			type: Object as PropType<UserProps>,
	  			required: true
	  		}
	  	}
	})
</script>
